<template>
    <el-card>
        <h5 class="fs18">车辆信息</h5>
        <div class="line mt18"></div>
        <div class="flex mt18 flex-wrap">
            <div class="fx_item">车牌号：京LEU765</div>
            <div class="fx_item">车辆识别代码：LESHS872HANSKDY83</div>
            <div class="fx_item">主机厂：吉利</div>
            <div class="fx_item">车辆状态：安全</div>
        </div>
        <div class="line mb20"></div>
        <h5 class="fs18">保单信息</h5>
        <div class="line mt18"></div>
        <div class="flex mt18 flex-wrap">
            <div class="fx_item">保险状态：保障中</div>
            <div class="fx_item">保障时间：2020年6月21日0:00时起至2021年6月20日24:00时止</div>
            <div class="fx_item">购险日期：2020年4月2日</div>
            <div class="fx_item">保单号：PDAA201861270000031519</div>
            <div class="fx_item">保费合计：￥19，300元</div>
            <div class="fx_item">投保地区：北京市西城区</div>
            <div class="fx_item">续保情况：无</div>
            <div class="fx_item">销售渠道：4S店</div>
        </div>
        <div class="line mb20"></div>
        <h5 class="fs18">避灾历史</h5>
        <div class="line mt18"></div>
        <el-table class="sd" stripe border :data="tableData" v-loading="loading">
            <el-table-column align="center" prop="szDate" label="受灾时间段"></el-table-column>
            <el-table-column align="center" prop="szType" label="受灾天气类型"></el-table-column>
            <el-table-column align="center" prop="szPosition" label="受灾地理位置"></el-table-column>
            <el-table-column align="center" prop="yjDate" label="预警时间段"></el-table-column>
            <el-table-column align="center" prop="bxType" label="避险通知方式"></el-table-column>
            <el-table-column align="center" prop="bxResult" label="避险结果"></el-table-column>
            <el-table-column align="center" prop="bonus" label="奖励金"></el-table-column>
        </el-table>
        <el-pagination class="tpl-mg-t mt20 mb20 fr"
                        small
                        @size-change="pageSizeChange"
                        @current-change="pageCurrentChange"
                        :current-page="queryForm.pageNum"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="queryForm.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
        </el-pagination>
    </el-card>
</template>

<script>
    export default {
        name: 'editPolicy',
        data () {
            return {
                // tab页标签
                activeName: 'operationList',
                // 列表查询条件
                queryForm: {
                    brand: '',
                    activityTitle: '',
                    activityStatus: '',
                    activityId: '',
                    pageNum: 1,
                    pageSize: 10
                },
                // total: 0,
                tableData: [],
                tableData2: [],
                tableSelection: [],
                // 基础数据列表
                baseList: {
                    GWBrand: [], // 长城品牌
                    activityList: [], // 活动入口
                    statusList: [ // 活动状态
                        { key: 0, value: '未上线' },
                        { key: 1, value: '已上线' },
                        { key: 2, value: '已下线' }
                    ]
                },
                userData: {},
                loading: false
            }
        },
        created () {
            this.queryList()
        },
        computed: {
            total() {
                return this.tableData.length;
            }
        },
        methods: {
            // 点击查询置为第一页
            queryList1 () {
                this.queryForm.pageNum = 1
                this.queryList()
            },
            // 查询列表
            queryList () {
                let cData = [], cData2 = [];
                    cData = [
                        {"szDate": "2020-07-21 15:00-17:00","szType": "冰雹","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "APP","bxResult": "避险成功","bonus": "500元"},
                        {"szDate": "2020-07-21 15:00-17:00","szType": "冰雹","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "APP","bxResult": "避险失败","bonus": "0元"},
                        {"szDate": "2020-07-21 15:00-17:00","szType": "道路积水","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "APP","bxResult": "避险成功","bonus": "0元"},
                        {"szDate": "2020-07-21 15:00-17:00","szType": "道路积水","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "短信","bxResult": "避险成功","bonus": "500元"},
                    ];
                this.tableData = cData;
            },
            reset () {
                this.queryForm.brand = ''
                this.queryForm.activityId = ''
                this.queryForm.activityStatus = ''
                this.queryForm.activityTitle = ''
                this.queryForm.pageNum = 1
                this.queryForm.pageSize = 10
                this.queryList()
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.queryForm.pageSize = val
                if (this.queryForm.pageNum > pages) {
                    this.queryForm.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.queryForm.pageNum = val
                this.queryList()
            },
        }
    }
</script>

<style scoped>
    .fx_item{
        flex-basis: 25%;
        margin-bottom: 20px;
    }
</style>
